<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点灯开关</title>
</head>
<body>

<img id="light" src="img/1.png">

<script>
  /**
   * 分析：
   *    1.获取图片对象
   *    2.绑定单击事件
   *    3.每次点击切换图片
   *        *规则：如果灯是开的 on，切换图片为 off
   *              如果灯是关的 off，切换图片为 on
   *        *使用标记 flag 来完成
   */

  //1.获取图片对象
  var light = document.getElementById("light");

  var flag = false; //代表灯是灭的。1.png图片

  //2.绑定单击事件
  light.onclick = function(){
      if(flag){//判断如果灯是开的，则灭掉
        light.src = "img/1.png";
        flag = false;
      }else{ //如果灯是灭的，则打开
        light.src = "img/2.png";
        flag = true;
      }
  }
</script>

</body>
</html>